<template>
	<view class="dateTimePicker">
			<slot></slot>
	        <u-datetime-picker
				ref="datetimePicker"
				:show="showDateTimePicker"
				v-model="pickerValue"
				mode="datetime"
				:formatter="formatter"
				@confirm="confirm"
				@cancel="cancel"
	        >
			</u-datetime-picker>
	</view>
</template>

<script>
	export default{
		props: {
			pickerValue: {
				type: Number,
				default: Number(new Date())
			},
			showDateTimePicker: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				console.log(value)
				return value
			},
			
			confirm(event){
				this.$emit("confirm",event, false)
			},
			
			cancel(){
				this.$emit("cancel", false)
			}
		}
	}
</script>

<style scoped lang="scss">
	.dateTimePicker{
		width: 100%;
	}
	.date-time-title{
		text-align: right;
	}
</style>
